<template>
  <div class="admin-dashboard">
    <!-- 侧边栏 -->
    <admin-sidebar ref="sidebarRef" :class="{ collapsed: sidebarCollapsed }" />

    <!-- 主内容区 -->
    <div class="main-content" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
      <!-- 顶部导航 -->
      <admin-header 
        page-title="数据概览"
        :sidebar-collapsed="sidebarCollapsed"
        @toggle-sidebar="toggleSidebar"
      />

      <!-- 内容区域 -->
      <div class="content">
        <!-- 数据统计卡片 -->
        <div class="stats-cards">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon blue">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ totalUsers }}</div>
                <div class="stat-label">总用户数</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon green">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ totalCourses }}</div>
                <div class="stat-label">课程总数</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon orange">
                <el-icon><ShoppingCart /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ totalOrders }}</div>
                <div class="stat-label">订单总数</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon red">
                <el-icon><Money /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">¥{{ totalRevenue }}</div>
                <div class="stat-label">总收入</div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 图表区域 -->
        <div class="charts-section">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>订单趋势</span>
              </div>
            </template>
            <div class="chart-container">
              <div class="chart-placeholder">订单趋势图表占位</div>
            </div>
          </el-card>
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>课程分类统计</span>
              </div>
            </template>
            <div class="chart-container">
              <div class="chart-placeholder">课程分类图表占位</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import AdminSidebar from '@/components/AdminSidebar.vue'
import AdminHeader from '@/components/AdminHeader.vue'

const router = useRouter()
const sidebarCollapsed = ref(false)
const sidebarRef = ref()

// 获取管理员信息
const adminInfo = computed(() => {
  const info = localStorage.getItem('adminInfo')
  if (info) {
    return JSON.parse(info)
  }
  // 为了开发测试，提供一个完整的默认管理员信息
  return { 
    name: '管理员', 
    username: 'admin', // 添加username属性，避免登录检查失败
    isSuperAdmin: true 
  }
})

// 切换侧边栏
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

// 统计数据（模拟）
const totalUsers = ref(1258)
const totalCourses = ref(128)
const totalOrders = ref(3567)
const totalRevenue = ref(125800)

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('adminToken')
  localStorage.removeItem('adminInfo')
  ElMessage.success('退出成功')
  router.push('/admin/login')
}

// 处理个人信息
const handleProfile = () => {
  ElMessage.info('个人信息功能开发中')
}

// 检查登录状态 - 开发阶段完全禁用
const checkLoginStatus = () => {
  // 开发阶段跳过登录验证
  // const adminToken = localStorage.getItem('adminToken')
  // if (!adminToken || !adminInfo.value.username) {
  //   ElMessage.error('请先登录')
  //   router.push('/admin/login')
  // }
}

onMounted(() => {
  // 注释掉登录验证，方便开发测试
  // checkLoginStatus()
})
</script>

<style scoped>
.admin-dashboard {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
}

.main-content {
  flex: 1;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: margin-left 0.3s ease;
}

.main-content.sidebar-collapsed {
  margin-left: 64px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    margin-left: 200px;
  }
  
  .main-content.sidebar-collapsed {
    margin-left: 64px;
  }
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.blue {
  background: #409eff;
}

.stat-icon.green {
  background: #67c23a;
}

.stat-icon.orange {
  background: #e6a23c;
}

.stat-icon.red {
  background: #f56c6c;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
}

.chart-card {
  min-height: 300px;
}

.chart-container {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  color: #999;
  font-size: 16px;
}
</style>